<template>
	<div class='xtx-goods-page' v-if="goods">
		<div class="container">
			<XtxBread>
				<XtxBreadItem to="/">首页</XtxBreadItem>
				<XtxBreadItem :to="'/category/'+goods.categories[1].id">{{goods.categories[0].name}}</XtxBreadItem>
				<XtxBreadItem :to="'/category/sub/'+goods.categories[0].id">{{goods.categories[1].name}}</XtxBreadItem>
				<XtxBreadItem>{{goods.name}}</XtxBreadItem>
			</XtxBread>

			<div class="goods-info">
				<div class="media">
					<GoodsImage :images="goods.mainPictures"></GoodsImage>
					<GoodsSales></GoodsSales>
				</div>
				<div class="spec">
					<GoodsName :goods="goods"></GoodsName>
					<GoodsSku :goods="goods" @change="changeSku"></GoodsSku>
					<XtxNumbox label="数量" v-model="num" :max="goods.inventory"></XtxNumbox>
					<XtxButton @click="insertCart()" type="primary" style="margin-top:20px;">加入购物车</XtxButton>
				</div>
			</div>

			<GoodsRelevant :goodsId="goods.id"></GoodsRelevant>
			<div class="goods-footer">
				<div class="goods-article">
					<div class="goods-tabs">
						<GoodsTabs :goods="goods"></GoodsTabs>
					</div>
					<div class="goods-warn">
						<GoodsWarn></GoodsWarn>
					</div>
				</div>
				<div class="goods-aside">
					<GoodsHot :goodsId="goods.id" :type="1"></GoodsHot>
					<GoodsHot :goodsId="goods.id" :type="2"></GoodsHot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import GoodsRelevant from './components/goods-relevant'
	import GoodsImage from './components/goods-image'
	import GoodsSales from './components/goods-sales'
	import GoodsName from './components/goods-name'
	import GoodsSku from './components/goods-sku'
	import GoodsTabs from './components/goods-tabs'
	import GoodsHot from './components/goods-hot'
	import GoodsWarn from './components/goods-warn'
	import Message from '@/components/library/Message'
	import {
		nextTick,
		ref,
		watch,
		provide
	} from 'vue'
	import {
		findGoods
	} from '@/api/product'
	import {
		useRoute
	} from 'vue-router'
	import {
		useStore
	} from 'vuex'

	export default {
		components: {
			GoodsRelevant,
			GoodsImage,
			GoodsSales,
			GoodsName,
			GoodsSku,
			GoodsTabs,
			GoodsHot,
			GoodsWarn
		},

		setup() {
			const goods = ref(null)
			const route = useRoute()
			const num = ref(1)
			const currSku = ref(null)
			const store = useStore()

			watch(() => route.params.id, newVal => {
				if (newVal && `/product/${newVal}` === route.path) {
					findGoods(route.params.id).then(data => {
						goods.value = null
						nextTick(() => {
							goods.value = data.result
						})
					})
				}
			}, {
				immediate: true
			})

			const changeSku = sku => {
				if (sku.skuId) {
					goods.value.price = sku.price
					goods.value.oldPrice = sku.oldPrice
					goods.value.inventory = sku.inventory
					currSku.value = sku
				} else {
					currSku.value = null
				}
			}

			const insertCart = () => {
				if (currSku.value && currSku.value.skuId) {
					const {
						skuId,
						specsText: attrsText,
						inventory: stock
					} = currSku.value
					const {
						id,
						name,
						price,
						mainPictures
					} = goods.value
					store.dispatch('cart/insertCart', {
						skuId,
						attrsText,
						stock,
						id,
						name,
						price,
						nowPrice: price,
						picture: mainPictures[0],
						selected: true,
						isEffective: true,
						count: num.value
					}).then(() => {
						Message({
							type: 'success',
							text: '加入购物车成功'
						})
					})
				} else {
					Message({
						text: '请选择完整规格'
					})
				}
			}

			provide('goods', goods)
			return {
				goods,
				changeSku,
				num,
				insertCart
			}
		}
	}
</script>

<style lang="less" scoped>
	.goods-info {
		min-height: 600px;
		background: #fff;
		display: flex;

		.media {
			width: 580px;
			height: 600px;
			padding: 30px 50px;
		}

		.spec {
			flex: 1;
			padding: 30px 30px 30px 0;
		}
	}

	.goods-footer {
		display: flex;
		margin-top: 20px;

		.goods-article {
			width: 940px;
			margin-right: 20px;
		}

		.goods-aside {
			width: 280px;
			min-height: 1000px;
		}
	}

	.goods-tabs {
		min-height: 600px;
		background: #fff;
	}

	.goods-warn {
		min-height: 600px;
		background: #fff;
		margin-top: 20px;
	}
</style>
